<template>
  <Modal
      :title="modalProps.title"
      :show="modalProps.show"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <ModalForm ref="form"></ModalForm>
  </Modal>
</template>

<script lang="ts">
export default {
  name: "categoryModal"
}
</script>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue"
import Modal from '@/components/Modal.vue'
import ModalForm from '@/components/ModalForm.vue'
import {FormModalType, ModalFormTreeOption} from '@/type/ModalFormType'
import {categoryListType, categorySaveType, categoryUpdateType} from '@/view/shopping/category/category'
import {ums_category_save, ums_category_treeList, ums_category_update} from '@/api/sms'
import useMsg from '@/hooks/useMsg'
import {treeNode} from '@/utils'
const {success, error} = useMsg()

const modalProps = reactive<{
  title: string
  show: boolean
}>({
  title: "",
  show: false
})

const emit = defineEmits<{
  (e: 'list'):void
}>()

const form = ref<FormModalType<categorySaveType>>()

const formData = ref<categoryUpdateType>()

const type = ref<0|1>(0)

const init = (data?: categoryUpdateType) => {
  if (data) {
    type.value = 1
    modalProps.title = "编辑"
    formData.value = data
    // let key: keyof categoryUpdateType
    // for (key in data) {
    //   f
    // }
  }else {
    type.value = 0
    modalProps.title = "添加"
  }
  modalProps.show = true
  nextTick(() => {
    treeList().then(res => {
      form.value?.init([
        {
          type: "tree",
          label: "上级分类",
          key: "parent_id",
          value: data?.parent_id,
          rules: {
            required: true,
            message: "请选择上级分类名称",
            trigger: "change",
          },
          treeOptions: {
            key: "0",
            label: "主目录",
            children: res
          }
        },
        {
          type: "input",
          label: "分类名称",
          key: "category_name",
          value: data?.category_name,
          rules: {
            required: true,
            message: "请输入分类名称",
            trigger: "change",
          },
        },
        {
          type: "number",
          label: "排序",
          key: "category_order",
          value: data?.category_order,
          rules: {
            type: "number",
            required: true,
            message: "请输入排序数字",
            trigger: "change",
          },
        },
      ])
    })
  })
}

const handleOk = () => {
  form.value?.validate().then(data =>{
    if (type.value === 0) {
      ums_category_save(data).then(res => {
        if (res.code === 200) {
          success( res.message )
          modalProps.show = false
          emit( "list" )
        } else {
          error( res.message )
        }
      }).catch(err => {
        error( err.message )
      })
    }
    if (type.value === 1) {
      console.log(formData)
      ums_category_update({
        ...data,
        category_id: formData.value!.category_id
      }).then(res => {
        if (res.code === 200) {
          success( res.message )
          modalProps.show = false
          emit( "list" )
        } else {
          error( res.message )
        }
      }).catch(err => {
        error( err.message )
      })
    }
  })
}

function treeList (): Promise<ModalFormTreeOption[]> {
  return ums_category_treeList().then(res => {
    const arr:ModalFormTreeOption[] = []
    res.data.forEach(item => {
      arr.push(treeNode<categoryListType>(item, {
        label: "category_name",
        key: "category_id"
      }))
    })
    console.log(arr)
    return arr
  })
}


const handleCancel = () => {
  modalProps.show = false
}


defineExpose({
  init
})

onMounted( () => {
} )
</script>

<style scoped lang="scss">

</style>
